<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .center{
      width: 1200px;
      margin: 0 auto;
    }
    .scale{
      text-decoration: none;
      color: #666;
    }
    .scale:hover {
      transform: scale(1.2);
      transition-duration: .3s;
    }
    .scale:active{
      color: orange;
    }
    .el-card p.active,.el-card p:hover{
      color:#409EFF
    }

    h3{color: white}

    .el-table .cell{
      height: 50px;
    }
  </style>
</head>
<body>
<div id="app">
  <common-header></common-header>
  <el-container style="background-color: rgb(241,242,243)">

    <el-main >
      <el-row gutter="20"  style="height: 800px">
        <el-col span="4">
          <el-card style="height: 100%;">
            <p @click="location.href='personal.html'">个人信息</p>
            <p  class="active" >稿件管理</p>
          </el-card>
        </el-col>
        <el-col span="20">
          <el-card >
            <el-tabs v-model="navKey" @tab-click="toggleNav" type="card">
              <el-tab-pane label="食谱" :name="1"></el-tab-pane>
              <el-tab-pane label="视频" :name="2"></el-tab-pane>
              <el-tab-pane label="资讯" :name="3"></el-tab-pane>
            </el-tabs>

            <el-button type="primary" @click="location.href='postContent.html'">发帖</el-button>

            <el-table
                    :data="arr"
                    border
                    style="width: 100%">
              <el-table-column width="150px"
                      prop="title"
                      label="标题"
                      align="center">
              </el-table-column>
              <el-table-column width="60px"
                      label="封面"
                      align="center">
                <template slot-scope="scope">
                  <img :src="scope.row.imgUrl" width="30px" height="30px">
                </template>
              </el-table-column>
              </el-table-column>

              <el-table-column width="300"
                      prop="brief"
                      label="摘要"
                      align="center">
              </el-table-column>
              <el-table-column
                      prop="categoryName"
                      label="类型"
                      align="center">
              </el-table-column>
              <el-table-column
                      prop="viewCount"
                      label="浏览量"
                      align="center">
              </el-table-column>
              <el-table-column
                      prop="commentCount"
                      label="回复量"
                      align="center">
              </el-table-column>
              <el-table-column width="200px"
                      prop="createTime"
                      label="创建时间"
                      align="center">
              </el-table-column>
              <el-table-column width="200px"
                      fixed="right"
                      label="操作"
                      width="100"
                      align="center">
                <template slot-scope="scope">
                  <el-button type="success" @click="edit(scope.$index,scope.row)">编辑</el-button>
                  <el-popconfirm @confirm="del(scope.$index, scope.row)"
                                 title="您确认删除此内容吗？">
                    <el-button slot="reference"
                               type="danger">删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>

          </el-card>
        </el-col>
      </el-row>


    </el-main>
  </el-container>
  <common-footer></common-footer>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="js/common.js"></script>
<script>
  let user = getLocalUser();
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        navKey: 1,
        arr:[],

      }
    },
    methods: {
      edit(i,content){
        location.href="/postContent.html?id="+content.id+"&type="+content.type;
      },
      del(i,content){
        axios.get("/api/content/deleteById?id="+content.id).then(function () {
            v.arr.splice(i,1);
        })
      },
      toggleNav(data){//tab切换
        this.getList(data.name)
      },
      getList(type){

        //通过分类
        axios.get("/api/content/getContentListForManagementByType?userId="+user.id+"&type="+type).then(function (response) {
          v.arr = response.data;
        })

      }

    },
    created:function () {
      this.getList(1);
    }
  })
</script>
</html>